﻿<!--
// (c) Copyright Microsoft Corporation.
// This source is subject to the Microsoft Public License (Ms-PL).
// Please see http://go.microsoft.com/fwlink/?LinkID=131993 for details.
// All other rights reserved.
-->

    <phone:PhoneApplicationPage
    x:Class="PhoneToolkitSample.Samples.LongListMultiSelectorSample"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:data="clr-namespace:PhoneToolkitSample.Data"
    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait"  Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

    <phone:PhoneApplicationPage.Resources>
        <!-- Resources for Email LongListMultiSelector -->
        <data:UnreadToBrushConverter x:Key="UnreadToBrushConverter"/>
        <data:EmailCollection x:Key="EmailCollection"/>
        <DataTemplate x:Key="EmailItemTemplate">
            <StackPanel Margin="0,-14,0,24" Tap="OnItemContentTap" >
                <TextBlock Text="{Binding Sender}" 
                                       Margin="0,0,0,-4"
                                       FontSize="{StaticResource PhoneFontSizeExtraLarge}" 
                                       FontFamily="{StaticResource PhoneFontFamilySemiLight}"/>
                <TextBlock Text="{Binding Subject}"
                                       Margin="0,0,0,-4"
                                       Foreground="{Binding Unread, Converter={StaticResource UnreadToBrushConverter}}"
                                       FontSize="{StaticResource PhoneFontSizeNormal}" 
                                       FontFamily="{StaticResource PhoneFontFamilySemiBold}"/>
                <TextBlock Text="{Binding Body}"
                                       Foreground="{StaticResource PhoneSubtleBrush}"
                                       FontSize="{StaticResource PhoneFontSizeNormal}"/>
            </StackPanel>
        </DataTemplate>
        <DataTemplate x:Key="EmailItemInfoTemplate">
            <Border Width="74" Margin="0,9,24,0">
                <TextBlock Text="{Binding Time}"
                                       HorizontalAlignment="Right"/>
            </Border>
        </DataTemplate>

        <!-- Resources for Buddies LongListMultiSelector -->
        <data:GroupToBackgroundBrushValueConverter x:Key="GroupBackground"/>
        <data:GroupToForegroundBrushValueConverter x:Key="GroupForeground"/>
        <data:PeopleByFirstName x:Key="buddies"/>
        <Style TargetType="phone:LongListSelector" x:Key="BuddiesJumpListStyle">
            <Setter Property="LayoutMode" Value="Grid"/>
            <Setter Property="GridCellSize" Value="113,113"/>
            <Setter Property="ItemTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <Border Background="{Binding Converter={StaticResource GroupBackground}}" 
                                                Width="99" Height="99" Margin="6">
                            <TextBlock Text="{Binding Key}" 
                                                       FontFamily="{StaticResource PhoneFontFamilySemiBold}"
                                                       FontSize="48"
                                                       Margin="8,0,0,0"
                                                       Foreground="{Binding Converter={StaticResource GroupForeground}}"                                        
                                                       VerticalAlignment="Bottom"/>
                        </Border>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <DataTemplate x:Key="BuddiesGroupHeaderTemplate">
            <Border Background="Transparent" Margin="12,8,0,8">
                <Border Background="{StaticResource PhoneAccentBrush}" 	
                                        Padding="8,0,0,0" Width="62" Height="62" 				 
                                        HorizontalAlignment="Left">
                    <TextBlock Text="{Binding Key}" 
                                               Foreground="#FFFFFF" 
                                               FontSize="48"
                                               FontFamily="{StaticResource PhoneFontFamilySemiLight}"
                                               HorizontalAlignment="Left"
                                               VerticalAlignment="Bottom"/>
                </Border>
            </Border>
        </DataTemplate>
        <DataTemplate x:Key="BuddiesItemTemplate">
            <Grid Margin="12,8,0,8">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Image Width="110" Height="150" Source="{Binding ImageUrl}" VerticalAlignment="Top"/>
                <StackPanel Grid.Column="1" VerticalAlignment="Top">
                    <TextBlock Text="{Binding FullName}" Style="{StaticResource PhoneTextLargeStyle}" FontFamily="{StaticResource PhoneFontFamilySemiBold}" Margin="12,-12,12,6"/>
                    <TextBlock Text="{Binding Email}" Style="{StaticResource PhoneTextNormalStyle}" TextWrapping="Wrap" FontFamily="{StaticResource PhoneFontFamilySemiBold}"/>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="Mobile:" Style="{StaticResource PhoneTextSmallStyle}"/>
                        <TextBlock Text="{Binding Mobile}" Style="{StaticResource PhoneTextSmallStyle}" FontFamily="{StaticResource PhoneFontFamilySemiBold}"/>
                    </StackPanel>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="Home:" Style="{StaticResource PhoneTextSmallStyle}"/>
                        <TextBlock Text="{Binding Home}" Style="{StaticResource PhoneTextSmallStyle}" FontFamily="{StaticResource PhoneFontFamilySemiBold}"/>
                    </StackPanel>
                </StackPanel>
            </Grid>
        </DataTemplate>


        <!-- Resources for Pictures LongListMultiSelector -->
        <data:PicturesAlbum x:Key="PicturesAlbum"/>
        <DataTemplate x:Key="PictureItemTemplate">
            <Grid Margin="1" Tap="OnPictureItemTap">
                <Image Source="{Binding Url}" Stretch="UniformToFill"/>
                <TextBlock Text="{Binding City}" VerticalAlignment="Bottom" HorizontalAlignment="Center"/>
            </Grid>
        </DataTemplate>

        <!-- Resources for Databound LongListSelector-->
        <DataTemplate x:Key="BuddiesGridTemplate">
            <Grid Margin="1" Width="100" Height="100">
                <Image Source="{Binding ImageUrl}" Stretch="UniformToFill"/>
                <Border
                    VerticalAlignment="Bottom"
                    HorizontalAlignment="Stretch"
                    Background="#C0808080"
                    >
                    <TextBlock Text="{Binding FullName}"
                               FontSize="12"
                                   TextTrimming="WordEllipsis"
                               HorizontalAlignment="Center"/>
                </Border>
            </Grid>
        </DataTemplate>
        <ItemsPanelTemplate x:Key="AttendeesPanelTemplate">
            <StackPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>

    </phone:PhoneApplicationPage.Resources>

    <toolkit:TransitionService.NavigationInTransition>
        <toolkit:NavigationInTransition>
            <toolkit:NavigationInTransition.Backward>
                <toolkit:TurnstileTransition Mode="BackwardIn"/>
            </toolkit:NavigationInTransition.Backward>
            <toolkit:NavigationInTransition.Forward>
                <toolkit:TurnstileTransition Mode="ForwardIn"/>
            </toolkit:NavigationInTransition.Forward>
        </toolkit:NavigationInTransition>
    </toolkit:TransitionService.NavigationInTransition>
    <toolkit:TransitionService.NavigationOutTransition>
        <toolkit:NavigationOutTransition>
            <toolkit:NavigationOutTransition.Backward>
                <toolkit:TurnstileTransition Mode="BackwardOut"/>
            </toolkit:NavigationOutTransition.Backward>
            <toolkit:NavigationOutTransition.Forward>
                <toolkit:TurnstileTransition Mode="ForwardOut"/>
            </toolkit:NavigationOutTransition.Forward>
        </toolkit:NavigationOutTransition>
    </toolkit:TransitionService.NavigationOutTransition>

    <Grid x:Name="LayoutRoot" Background="Transparent">
        <!--Pivot Control-->
        <phone:Pivot Title="LONGLISTMULTISELECTOR SAMPLE"
                     x:Name="SamplePivot"
                     SelectionChanged="OnPivotSelectionChanged">

            <phone:PivotItem x:Name="MultiselectLbxItem" Header="Multiselect Lbx">
                <toolkit:LongListMultiSelector x:Name="EmailList" 
                                                Margin="0,14,-12,0"
                                                ItemsSource="{StaticResource EmailCollection}"
                                                LayoutMode="List"
                                                SelectionChanged="OnEmailListSelectionChanged"
                                                IsSelectionEnabledChanged="OnEmailListIsSelectionEnabledChanged"
                                                ItemTemplate="{StaticResource EmailItemTemplate}"
                                                ItemInfoTemplate="{StaticResource EmailItemInfoTemplate}"
            />
            </phone:PivotItem>

            <phone:PivotItem x:Name="BuddiesPivotItem" Header="Std longlistmultiselector">
                <toolkit:LongListMultiSelector x:Name="buddies" Background="Transparent"
                                                Margin="0,-8,0,0"
                                                ItemsSource="{StaticResource buddies}"
                                                LayoutMode="List"
                                                IsGroupingEnabled="True"
                                                HideEmptyGroups="True"
                                                JumpListStyle="{StaticResource BuddiesJumpListStyle}"
                                                GroupHeaderTemplate="{StaticResource BuddiesGroupHeaderTemplate}"
                                                ItemTemplate="{StaticResource BuddiesItemTemplate}"
            />
            </phone:PivotItem>

            <phone:PivotItem x:Name="GridModeItem" Header="Grid mode">
                <toolkit:LongListMultiSelector x:Name="GridSelector"
                                               ItemsSource="{StaticResource PicturesAlbum}"
                                               IsGroupingEnabled="False"
                                               GridCellSize="210,180"
                                               LayoutMode="Grid"
                                               HideEmptyGroups="True"
                                               ItemTemplate="{StaticResource PictureItemTemplate}"
                                               IsSelectionEnabledChanged="OnGridSelectorIsSelectionEnabledChanged"
                                               SelectionChanged="OnGridSelectorSelectionChanged"
                />
            </phone:PivotItem>

            <phone:PivotItem x:Name="DataboundPivotItem" Header="Databinding">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="120"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition/>
                    </Grid.RowDefinitions>
                    <TextBlock Text="Attendees"/>
                    <ItemsControl Grid.Row="1"
                                  ItemsSource="{Binding SelectedItems, ElementName=BoundBuddies}"
                                  ItemTemplate="{StaticResource BuddiesGridTemplate}"
                                  ItemsPanel="{StaticResource AttendeesPanelTemplate}"
                                  />
                    <TextBlock Text="All Contacts" Grid.Row="2"/>
                    <toolkit:LongListMultiSelector x:Name="BoundBuddies"
                        Background="Transparent"
                        Grid.Row="3"
                        ItemsSource="{StaticResource buddies}"
                                                   GridCellSize="104,108"
                                                LayoutMode="Grid"
                        IsGroupingEnabled="True"
                        GroupHeaderTemplate="{StaticResource BuddiesGroupHeaderTemplate}"
                        HideEmptyGroups="True"
                        JumpListStyle="{StaticResource BuddiesJumpListStyle}"
                        ItemTemplate="{StaticResource BuddiesGridTemplate}"
                                                   EnforceIsSelectionEnabled="True"
                    />
                    <!--
                    
                        -->
                </Grid>
            </phone:PivotItem>

        </phone:Pivot>

        <Grid x:Name="ZoomGrid" Visibility="Collapsed" Background="#C0000000" Tap="OnZoomGridTap">
            <Grid Margin="32" VerticalAlignment="Center">
                <Grid.RowDefinitions>
                    <RowDefinition/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <Border Background="Black" BorderBrush="White" BorderThickness="4" Grid.RowSpan="2"/>
                <Image Margin="16,16,16,0" Source="{Binding Url}" Stretch="Uniform"/>
                <TextBlock Grid.Row="1" FontSize="30" Text="{Binding City}"
                           HorizontalAlignment="Center" Margin="8"/>
            </Grid>
        </Grid>
    </Grid>

    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="False" IsMenuEnabled="True">
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>

</phone:PhoneApplicationPage>